<template>
  <Wrapper>
    <el-card shadow="never" header="基础表单，用法同el-form">
      <template #header>
        <el-space :size="30">
          <h5>基础表单</h5>
          <el-button link type="primary" icon="View" @click="open"
            >查看文档</el-button
          >
        </el-space>
      </template>
      <dynamic-form ref="formRef" :model="formData" :rules="rules">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="爱好" prop="hobby">
          <el-select v-model="formData.hobby" placeholder="请选择爱好">
            <el-option label="篮球" value="basketball"></el-option>
            <el-option label="足球" value="football"></el-option>
            <el-option label="羽毛球" value="badminton"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="地址" prop="place">
          <el-checkbox-group v-model="formData.place">
            <el-checkbox value="北京"> 北京 </el-checkbox>
            <el-checkbox value="上海"> 上海 </el-checkbox>
            <el-checkbox value="广州"> 广州 </el-checkbox>
            <el-checkbox value="重庆"> 重庆 </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </dynamic-form>
      <el-button type="primary" @click="getClick">获取</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </el-card>

    <docs-modal v-model="visible" />
  </Wrapper>
</template>

<script setup>
import useModal from '@/hooks/useModal'
import DynamicForm from '@/components/form'
import DocsModal from '../components/docs-modal'

const { visible, open } = useModal()

const formRef = ref(null)
const formData = ref({
  name: '',
  age: '',
  place: [],
})
const rules = {
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  hobby: [{ required: true, message: '选择爱好', trigger: 'change' }],
  place: [{ required: true, message: '选择地址', trigger: 'change' }],
}

async function getClick() {
  await formRef.value.validate()
  console.log(formData.value)
}

function reset() {
  formRef.value.resetFields()
  formData.value = {
    name: '',
    age: '',
    place: [],
  }
}
</script>
